<?php 
$content = "
<div style='width:80%; margin: 0 auto; display:inline-block; background-color:white; padding:20px; border-radius:10px; max-height:80vh; overflow-y:scroll;'>
	<div> 
		<img src='assets/logo.png' style='box-shadow:2px 2px 5px rgba(0,0,0,0.5); max-width:50px; ' valign='middle'>
		<span style='display:inline-block; font-weight:light; color:black; font-size:30px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);'>Notebubble</span>
	</div>
	
	<p>Bienvenue sur Notebubble! Cette application est un moyen simple et rapide de stocker et organiser vos notes. Voici un guide rapide pour vous aider à utiliser toutes les fonctionnalités :</p>
	
	<h1>Aide et Références</h1>

<div style='text-align: justify !important; text-justify: inter-word; !important'>

	<div class='section'>
		<h2>Catégories</h2>
		<p>Les notes sont regroupées par catégories. Pour en créer une, cliquez sur l'icône + dans la barre latérale.<br>
		<p>Vous pourrez nommer votre catégorie et ajouter une description. Vous pouvez également choisir une icône et une couleur d'arrière-plan pour la catégorie (modifiable plus tard).</p><p>En option, vous pouvez définir un mot de passe pour rendre la catégorie privée.</p>
	</div>
	
	<div class='section'>
		<h2>Notes</h2>
		<p>Les notes sont stockées dans des \"bulles\" (d'où le nom de l'application), que vous pouvez créer en quelques étapes simples:<br><br>
		Créer une note est aussi rapide que de cliquer sur la catégorie où vous souhaitez l’ajouter, écrire dans l’espace en bas de l’écran, puis cliquer sur Envoyer. Vous pouvez également appuyer sur <b>Ctrl+Entrée</b> pour envoyer la note.
		<br><br>
		Créer des notes est simple, mais il y a d'autres options pour personnaliser vos bulles :
		<br>
		
		<h3>Pièces jointes</h3>
		Vous pouvez joindre des fichiers et des images à vos notes. Cliquez simplement sur l'icône de pièce jointe dans le formulaire en bas et sélectionnez le fichier à ajouter. Vous pouvez aussi les coller directement avec Ctrl+V si vous les avez dans votre presse-papiers.<br><br>
		<b>Note sur les images jointes :</b><br>
		Pour économiser de l'espace dans la base de données, les images sont par défaut compressées dans un format plus léger avant d'être ajoutées à la base de données. Si vous souhaitez conserver le fichier original non compressé, désactivez la compression avant de télécharger l'image en cliquant sur le bouton en forme d'engrenage <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> dans le formulaire de publication et en désactivant l'option de compression des images.
		<h3>Listes de tâches</h3>
		<p>Une bulle peut contenir des éléments de liste de tâches avec des cases à cocher que vous pouvez cocher/décocher pour suivre vos tâches. Pour créer un élément de liste de tâches, commencez la ligne par les caractères >>, par exemple :</p>
		<p>>> Oranges<br>
		>> Milk<br>
		>> Newspaper</p>
		<h3>Rappels</h3>
		<p>Vous pouvez définir un rappel pour une note, et l'application vous notifiera à la date et heure programmées.<br><br>
		Pour configurer un rappel, cliquez sur l'icône d'engrenage dans le formulaire en bas et entrez la date et l'heure souhaitées. Vous pouvez également utiliser l'icône de calendrier pour sélectionner une date et une heure.
		<br><br>L'application affichera une notification lorsqu'il sera temps.
		</p>	
		
		<h3>Mise en forme de base du texte</h3>
		<p>Vous pouvez formater le texte en utilisant une syntaxe de balisage simple :</p>
		<table style='display:inline-block;'>
		<tr><td>**texte**</td><td>=></td><td><b>Texte en gras</b></td></tr>
		<tr><td>*texte*</td><td>=></td><td><i>Texte en italique</i></td></tr>
		<tr><td>__texte__</td><td>=></td><td><u>Texte souligné</u></td></tr>
		</table>
		<br><br>
		D'autres options seront disponibles dans les futures versions de l'application.
	</div>

	<div class='section'>
		<h2>Options des Notes</h2>
		<p>Une fois une note envoyée, plusieurs actions sont disponibles. Passez le curseur sur l'icône <span style='font-weight:bold; font-family:icons; color:#2980B9;'></span> de chaque note pour afficher les options :
		
		<h3>Supprimer</h3>
		Efface la note si elle n’est plus nécessaire
		
		<h3>Modifier</h3>
		Permet de modifier le texte, les pièces jointes et les rappels de la note.
		
		<h3>Mettre en évidence</h3>
		Si la note est importante, cliquez ici pour la mettre en évidence et la retrouver rapidement.
		
		<h3>Épingler une note</h3>
		Si une catégorie contient de nombreuses notes et que vous avez besoin d’accéder souvent à une note particulière, vous pouvez l’épingler pour qu’elle apparaisse en haut de la catégorie. En cliquant sur la notification, vous accéderez directement à la note épinglée.
	</div>

	<div class='section'>
		<h2>Options des Catégories</h2>
		Les catégories, comme les notes, ont des options accessibles via l'icône de menu en haut de chaque catégorie :
		
		<h3>Modifier</h3>
		Permet de modifier le nom, la description, l'icône, l'arrière-plan et le mot de passe de la catégorie.
		
		<h3>Épingler</h3>
		Comme les notes, les catégories peuvent également être épinglées pour apparaître en haut de la liste des catégories.
		
		<h3>Supprimer</h3>
		Supprimez la catégorie et toutes les notes qu'elle contient si elle n’est plus nécessaire.
	</div>
	
	<div class='section'>
		<h2>Recherche</h2>
		
		Si vous avez besoin de retrouver une note spécifique, cliquez sur l'icône de recherche dans le menu de catégorie. Cela ouvrira un formulaire de recherche où vous pourrez saisir le texte à rechercher. Les notes contenant ce texte seront alors affichées.
	</div>

	<div class='section'>
		<h2>Paramètres de l'application</h2>
		
		En cliquant sur l'icône d'engrenage <span style='font-weight:bold; font-family:icons; color:#2980B9;'>()</span> dans le menu de la barre latérale, vous accédez à la page de configuration. Les paramètres disponibles incluent:
		
		<h3>Langue et fuseau horaire</h3>
		Vous pouvez modifier la langue de l'application et votre fuseau horaire. Si l’heure affichée est incorrecte, sélectionnez la ville la plus proche, puis cliquez sur le bouton pour sauvegarder les modifications.
		
		<h3>Gestion de la base de données</h3>
		En général, vous n'avez pas besoin de modifier ces paramètres, mais si vous souhaitez déplacer la base de données vers un autre emplacement (par exemple, un dossier de stockage cloud), vous pouvez le configurer ici. Notez que changer ces paramètres fixe l’emplacement de la base de données. Pour conserver une base portable, ne modifiez pas ces paramètres.
		
		<h3>Remarques sur la configuration :</h3>
		Supprimer le dossier \"notebubble\" réinitialise l'application, y compris vos notes et paramètres. Pour garder tout portable, assurez-vous que le dossier reste avec l’exécutable de l’application.
	</div>
	</div>
</div>";

echo renderPage($content);